<template>
  <el-drawer
    size="45%"
    :visible.sync="drawer"
    :with-header="false"
    :width="900"
    direction="rtl"
  >
    <div class="drawer_box">
      <div class="drawer_t">
        <div class="drawer_t_l">
          <img
            class="drawer_t_l_img"
            src="../../../../../static/skin/herodoo/main/platform/home/img/piliangoumai.png"
            alt=""
          />
          编辑产品
        </div>
        <img
          class="drawer_t_r"
          src="../../../../../static/skin/herodoo/main/platform/home/img/guanbi.png"
          alt=""
          @click="drawer = false"
        />
      </div>

      <div class="drawer_c">
        <div class="container">
          <div class="form-item">
            <div class="title">产品名称：</div>
            <div class="content">{{ form.Name }}</div>
          </div>
          <div class="form-item">
            <div class="title">产品ID：</div>
            <div class="content">{{ form.ID }}</div>
          </div>
          <div class="form-item">
            <div class="title">产品类型：</div>
            <div class="content">{{ form.FlagList }}</div>
          </div>

          <!-- <div class="form-item">
            <div class="title">合作企业：</div>
            <div class="content">{{ form.CompanyID }}</div>
          </div> -->
          <div class="form-item">
            <div class="title">权益平台服务费：</div>
            <div class="content">
              <el-input v-model="form.PlatformServiceRate" placeholder="请输入权益平台服务费">
                <div slot="suffix">%</div>
              </el-input>
            </div>
          </div>
          <div class="form-item">
            <div class="title">小程序服务费：</div>
            <div class="content">
              <el-input v-model="form.EquityServiceRate" placeholder="请输入权益平台服务费">
                <div slot="suffix">%</div>
              </el-input>
            </div>
          </div>
          <div class="form-item">
            <div class="title">市场价格：</div>
            <div class="content">
              <el-input v-model="form.SalePrice" placeholder="请输入权益平台服务费">
                <div slot="suffix">元</div>
              </el-input>
            </div>
          </div>
          <div class="form-item">
            <div class="title">平台价格：</div>
            <div class="content">
              <el-input v-model="form.CostPrice" placeholder="请输入权益平台服务费">
                <div slot="suffix">元</div>
              </el-input>
            </div>
          </div>
          <div class="form-item">
            <div class="title">产品主图：</div>
            <div class="content">
              <div class="tips">主图仅可上传1张图片，图片不超过512KB，仅支持jpg、png格式</div>
              <update ref="update" :list="mainUrl" :num="1" :octopus="octopus" @imgList="getMainUrl"></update>
            </div>
          </div>

          <div class="form-item">
            <div class="title">产品附图：</div>
            <div class="content">
              <div class="tips">附图可上传7张图片，图片不超过512KB，仅支持jpg、png格式</div>
              <update ref="updateFigures" multiple :list="imgsUrl" @imgList="getImgsUrl" :num="7" :octopus="octopus">
              </update>
              <!-- <update-figures ref="updateFigures" :fileList="imgsUrl" @imgList="getImgsUrl" :num="9" :octopus="octopus">
              </update-figures> -->
            </div>
          </div>
          <div class="form-item flex-column">
            <div class="title">详情内容：</div>
            <div class="content">
              <quill
                ref="quill"
                :octopus="octopus"
                :desc="quillContent"
                @quillContent="getQuillContent"
              ></quill>
            </div>
          </div>
          <div class="form-item">
            <div class="title">是否启用：</div>
            <div class="content">
              <el-radio v-model="form.IsOpen" label="是">是</el-radio>
              <el-radio v-model="form.IsOpen" label="否">否</el-radio>
            </div>
          </div>
        </div>
        <div class="footer">
          <button class="footer-btn" @click="updateProductInfo">保存</button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import update from "@/components/Components/imgUpdate.vue";
import quill from "@/components/Components/quillEditor.vue";
export default {
  name: "lookProducts",
  components: {
    update,
    quill,
  },
  props: {
    productId: {
      type: [String, Number],
      default: ''
    },
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      drawer: false,
      form: {},
      fileList: [],
      updateFile: [],
      quillContent: ""
    };
  },
  watch: {
    drawer: {
      handler(v) {
        v && this.getProductInfo()
      },
    }
  },

  computed: {
    mainUrl() {
      return this.fileList[0] ? [this.fileList[0]] : []
    },
    imgsUrl() {
      return this.fileList.slice(1)
    }
  },
  mounted() {},
  methods: {
    changeType() {},
    showDialog() {
      this.drawer = true;
    },
    closeDialog() {
      this.drawer = false;
    },
    getProductInfo() {
      let o = this
      this.octopus.request.api.post('/Octopus/Engine/List', {
        id: 1187,
        cellData: [
          {name: "CompanyID"},	// 企业名称
          {name: "ContractID"},	// 合同编号
          {name: "CostPrice"},	// 平台价格
          {name: "CreateTime"},	// 创建时间
          {name: "CreateUserID"},	// 创建人
          {name: "Description"},	// 产品描述（富文本）
          {name: "Description_EN"},	// 产品描述（英文）
          {name: "EquityServiceRate"},	// 小程序服务费费率
          {name: "FlagList"},	// 产品类型
          {name: "ID", filterKey: '=', filterValue: o.productId},	// ID
          {name: "IsOpen"},	// 是否启用
          {name: "Name"},	// 产品名称
          {name: "Name_EN"},	// 英文名称
          {name: "PlatformServiceRate"},	// 平台服务费费率（%）
          {name: "SalePrice"},	// 市场价
          {name: "ThumbnailPath"},	// 缩略图/封面图（1张）
          {name: "UpdateTime"},	// 修改时间
        ],
      },
      function(data){
        if (data.status.code == 200) {
          o.form = data.content.queryData[0]
          o.form.PlatformServiceRate = o.form.PlatformServiceRate * 100
          o.form.EquityServiceRate = o.form.EquityServiceRate * 100
          o.quillContent = o.form.Description
          o.$nextTick(()=> o.$refs.quill.content = o.form.Description)
          try {
            if(o.form.ThumbnailPath == null) {
              o.fileList = []
              o.updateFile = []
            } else { 
              o.fileList = JSON.parse(o.form.ThumbnailPath)
              o.updateFile = JSON.parse(o.form.ThumbnailPath)
            }
          }catch(e){}
        } else {
            o.octopus.tips.error(data);
        }
      })
    },
    updateProductInfo() {
      let o = this
      this.form.IsOpen = this.form.IsOpen == "是" ? 1 : 0
      this.form.ThumbnailPath = JSON.stringify(this.updateFile)
      this.octopus.request.api.post('/Octopus/Engine/Item', {
        id: 1187,
        type: "UPDATE",
        value: o.productId,
        cellData: [
          // {name: "CompanyID", defaultValue: o.form.CompanyID},	// 企业名称
          // {name: "ContractID", defaultValue: o.form.ContractID},	// 合同编号
          {name: "CostPrice", defaultValue: o.form.CostPrice},	// 平台价格
          // {name: "CreateTime", defaultValue: o.form.CreateTime},	// 创建时间
          // {name: "CreateUserID", defaultValue: o.form.CreateUserID},	// 创建人
          {name: "Description", defaultValue: o.form.Description},	// 产品描述（富文本）
          {name: "Description_EN", defaultValue: o.form.Description_EN},	// 产品描述（英文）
          {name: "EquityServiceRate", defaultValue: o.form.EquityServiceRate/100},	// 小程序服务费费率
          // {name: "FlagList", defaultValue: o.form.FlagList},	// 产品类型
          // {name: "ID", defaultValue: o.form.ID},	// ID
          {name: "IsOpen", defaultValue: o.form.IsOpen},	// 是否启用
          // {name: "Name", defaultValue: o.form.Name},	// 产品名称
          // {name: "Name_EN", defaultValue: o.form.Name_EN},	// 英文名称
          {name: "PlatformServiceRate", defaultValue: o.form.PlatformServiceRate/100},	// 平台服务费费率（%）
          {name: "SalePrice", defaultValue: o.form.SalePrice},	// 市场价
          {name: "ThumbnailPath", defaultValue: o.form.ThumbnailPath},	// 缩略图/封面图（1张）
          {name: "UpdateTime", defaultValue: o.form.UpdateTime},	// 修改时间
        ]
        },
        function(data){
            if (data.status.code == 200) {
              o.openORCloseProduct()
            } else {
                o.octopus.tips.error(data);
            }
        })
      },

    getQuillContent(content) {
      this.form.Description = content
    },

    getMainUrl(fileList) {
      this.$set(this.updateFile, 0, fileList[0])
    },

    getImgsUrl(fileList) {
      this.$set(this, 'updateFile', [this.updateFile[0], ...fileList])
    },
    // 产品启用未启用
    openORCloseProduct() {
      this.octopus.tools.openAPI('/ESB/AIGC/openORCloseProduct?isOpen='+this.form.IsOpen+'&productId=' + this.productId, {
        isOpen: this.form.IsOpen,
        productId: this.productId,
        },
        (data) => {
            if (data.status.code == 200) {
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.drawer = false
            } else {
                this.octopus.tips.error(data);
            }
        })
    },
  },
};
</script>
<style scoped>
.flex-column {
  flex-direction: column;
}

.drawer_box {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.drawer_c {
  font-size: 1.6rem;
  height: 85vh;
  overflow: auto;
}

.container {
  margin: 20px;
  padding: 20px;
  border-radius: 20px;
  background-color: #fdfdfd;
  border: 1px solid #f1f1f1;
}
.form-item {
  display: flex;
  justify-content: space-between;
  min-height: 20px;
  margin-bottom: 20px;
}

.form-item .title {
  width: 100px;
  margin-right: 5px;
  flex-grow: 0;
  flex-shrink: 0;
  line-height: 20px;
}

.form-item .content {
  flex: 1;
  line-height: 20px;
}
.flex-column .content {
  height: 200px;
}

.form-item .content .tips {
  margin-bottom: 20px;
}

.footer {
  width: 100%;
  padding: 0 20px;
  margin-top: 1rem;
  display: flex;
  justify-content: end;
  position: absolute;
  background-color: #ffff;
  bottom: 1rem;
}

.footer .footer-btn {
  border: none;
  height: 4rem;
  width: 12rem;
  border-radius: 1rem;
  margin-left: 1rem;
  color: #ffff;
  background-color: #F78C53;
}
>>>.form-item .content .el-input {
  width: 100%;
  height: 4.5rem;
}
>>>.form-item .content .el-input__inner {
  cursor: pointer;
  padding-right: 35px;
  height: 100%;
  font-size: 1.8rem;
}

>>> .form-item .content .el-input__suffix {
  color: #000;
  font-size: 1.8rem;
  line-height: 4.5rem;
}

>>> .form-item .content .el-radio__label {
  font-size: 1.8rem;
}
</style>